<template>
    <div class="video-panel">
        <div class="video-box" v-for=" index in 13" :key="index">
            <div class="video-cover">
                <img src="https://picx.zhimg.com/v2-1d6febbc457f4de66057cac3b9c7e34d_640w.jpg?source=12a79843"
                    alt="暂时无法查看">
                <div class="video-cover-info">
                    <el-icon size="20">
                        <VideoPlay />
                    </el-icon> 633336次播放
                    <span style="margin-left: auto;">1:25</span>
                </div>
            </div>

            <!-- 视频信息 -->
            <div class="video-content">
                <p>
                    英国剃刀党再度崛起，这回是英国最老的剃刀党，英国其他党又如何应对？
                </p>
            </div>

            <div class="video-author">
                <el-avatar shape="circle" :size="25" />
                <span style="margin-left: 5px;"> 小雯影视 </span>
                <el-icon style="margin-left: auto;">
                    <MoreFilled />
                </el-icon>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.video-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    .video-box {
        width: 220px;
        height: 230px;
        margin-left: 5px;
        margin-bottom: 1px;

        .video-cover {

            width: 220px;
            height: 141px;
            border-radius: 4px;
            overflow: hidden;
            position: relative;

            img {
                width: 220px;
                height: 142px;
                cursor: pointer;
                transition: all .6s;
            }

            .video-cover-info {
                width: 190px;
                position: absolute;
                bottom: 0px;
                left: 10px;
                cursor: pointer;
                font-size: 14px;
                display: flex;
                color: rgb(255, 255, 255);
                height: 30px;
                line-height: 30px;
                align-items: center;
            }
        }

        .video-cover:hover img {
            transform: scale(1.5);
        }



        .video-content {
            width: 220px;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 15px;
            text-align: left;
            line-height: 21px;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            cursor: pointer;
        }

        .video-content:hover {
            color: rgb(9, 64, 142);
            transition: all 0.3s;
        }

        .video-author {
            width: 210px;
            height: 30px;
            display: flex;
            font-size: 14px;
            line-height: 30px;
            align-items: center;
            cursor: pointer;
            color: rgb(83, 88, 97);
        }

    }
}
</style>